<template>
  <flight-menu :left="false">
    <template v-slot:header>
      <span class="f-menu--title f-menu--title-right">
        {{ title }}
      </span>
    </template>
    <template v-slot:default>
      <div class="row row--column">
        <right-card-template
          tag1="入境数量"
          tag2="出境数量"
          icon1="r-icon-1"
          icon2="r-icon-2"
          unit="架次"
          :data1="flightCount[0]"
          :data2="flightCount[1]"
        >
          当日办理航班数
        </right-card-template>
        <right-card-template
          tag1="入境人员数"
          tag2="出境人员数"
          icon1="r-icon-7"
          icon2="r-icon-8"
          :data1="people[0]"
          :data2="people[1]"
        >
          当日出入境人员数
        </right-card-template>
        <right-card-template
          tag1="入境旅客数"
          tag2="出境旅客数"
          icon1="r-icon-3"
          icon2="r-icon-4"
          :data1="passengers[0]"
          :data2="passengers[1]"
        >
          当日出入境旅客数
        </right-card-template>
        <right-card-template
          tag1="入境员工数"
          tag2="出境员工数"
          icon1="r-icon-5"
          icon2="r-icon-6"
          :data1="staffs[0]"
          :data2="staffs[1]"
        >
          当日出入境员工数
        </right-card-template>
      </div>
    </template>
  </flight-menu>
</template>

<script>
import FlightMenu from '../FlightMenu.vue';
import RightCardTemplate from './RightCardTemplate.vue';
import { useCheckboxInjector } from '../../composables/useChecbox.ts';
export default {
  name: 'SecondRight',
  components: {
    FlightMenu,
    RightCardTemplate,
  },
  setup() {
    const { register, unregister, computedAirport } = useCheckboxInjector();
    return {
      register,
      unregister,
      computedAirport,
    };
  },
  data() {
    return {
      title: '上海机场口岸出入境飞机及人员情况',
      flightCount: [0, 0],
      people: [0, 0],
      passengers: [0, 0],
      staffs: [0, 0],
    };
  },
  mounted() {
    this.register(this.getEntryExit);
    this.getEntryExit();
  },
  beforeUnmount() {
    this.unregister(this.getEntryExit);
  },
  methods: {
    solveData(rawData, thisData) {
      if (rawData) {
        thisData[0] = rawData.enter;
        thisData[1] = rawData.exit;
      }
    },
    getEntryExit() {
      return this.$http
        .get('/entryExit', {
          airport: this.computedAirport,
        })
        .then((result) => {
          if (result && result.status && result.status === 200) {
            const data = result.data;
            this.solveData(data.flightCount, this.flightCount);
            this.solveData(data.people, this.people);
            this.solveData(data.passengers, this.passengers);
            this.solveData(data.staffs, this.staffs);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>